﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
                    xmlns:system="clr-namespace:System;assembly=mscorlib"
                    xmlns:controls="clr-namespace:Microsoft.Telco.Controls.WindowsPhone">

    <!-- Advertising control -->
    <Style TargetType="controls:AdvertisingControl">
        <Setter Property="Background"
                Value="GhostWhite" />
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="AdvertisementTextForeground"
                Value="Black"></Setter>
        <Setter Property="AdvertisementTextFontFamily"
                Value="Portable User Interface" />
        <Setter Property="AdvertisementTextFontWeight"
                Value="Normal" />
        <Setter Property="AdvertisementTextFontSize"
                Value="16" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:AdvertisingControl">
                    <Border x:Name="AdvControlBorder"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Height="{TemplateBinding Height}"
                            Width="{TemplateBinding Width}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="LoadStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:1">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <SineEase EasingMode="EaseOut" />
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                        <VisualTransition GeneratedDuration="0:0:1"
                                                          To="DisplayImage" />
                                        <VisualTransition GeneratedDuration="0:0:1"
                                                          To="DisplayText" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="DisplayImage">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                                             Storyboard.TargetName="AdvImage" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                           Storyboard.TargetName="AdvImage">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0"
                                                             To="0"
                                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                                             Storyboard.TargetName="AdvText" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                           Storyboard.TargetName="AdvText">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="DisplayText">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                                             Storyboard.TargetName="AdvText" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                           Storyboard.TargetName="AdvText">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0"
                                                             To="0"
                                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                                             Storyboard.TargetName="AdvImage" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                           Storyboard.TargetName="AdvImage">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Image x:Name="AdvImage"
                                   Stretch="Fill"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"></Image>
                            <TextBlock x:Name="AdvText"
                                       FontFamily="{TemplateBinding AdvertisementTextFontFamily}"
                                       FontSize="{TemplateBinding AdvertisementTextFontSize}"
                                       Foreground="{TemplateBinding AdvertisementTextForeground}"
                                       FontWeight="{TemplateBinding AdvertisementTextFontWeight}"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"></TextBlock>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Common Control templates -->
    <ControlTemplate x:Key="ValidationToolTipTemplate">
        <Grid x:Name="Root"
              Margin="5,0"
              Opacity="0"
              RenderTransformOrigin="0,0">
            <Grid.RenderTransform>
                <TranslateTransform x:Name="xform"
                                    X="-25" />
            </Grid.RenderTransform>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="OpenStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0" />
                        <VisualTransition GeneratedDuration="0:0:0.2"
                                          To="Open">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2"
                                                 To="0"
                                                 Storyboard.TargetProperty="X"
                                                 Storyboard.TargetName="xform">
                                    <DoubleAnimation.EasingFunction>
                                        <BackEase Amplitude=".3"
                                                  EasingMode="EaseOut" />
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation Duration="0:0:0.2"
                                                 To="1"
                                                 Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="Root" />
                            </Storyboard>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Closed">
                        <Storyboard>
                            <DoubleAnimation Duration="0"
                                             To="0"
                                             Storyboard.TargetProperty="Opacity"
                                             Storyboard.TargetName="Root" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Open">
                        <Storyboard>
                            <DoubleAnimation Duration="0"
                                             To="0"
                                             Storyboard.TargetProperty="X"
                                             Storyboard.TargetName="xform" />
                            <DoubleAnimation Duration="0"
                                             To="1"
                                             Storyboard.TargetProperty="Opacity"
                                             Storyboard.TargetName="Root" />
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border Background="#052A2E31"
                    CornerRadius="0"
                    Margin="4,4,-4,-4" />
            <Border Background="#152A2E31"
                    CornerRadius="0"
                    Margin="3,3,-3,-3" />
            <Border Background="#252A2E31"
                    CornerRadius="0"
                    Margin="2,2,-2,-2" />
            <Border Background="#352A2E31"
                    CornerRadius="0"
                    Margin="1,1,-1,-1" />
            <Border Background="#FFDC000C"
                    CornerRadius="0" />
            <Border CornerRadius="0">
                <TextBlock Foreground="White"
                           MaxWidth="250"
                           Margin="8,4,8,4"
                           TextWrapping="Wrap"
                           Text="{Binding (Validation.Errors)[0].ErrorContent}"
                           UseLayoutRounding="false" />
            </Border>
        </Grid>
    </ControlTemplate>

    <!-- Common styles -->
    <Style x:Key="TextboxWithoutBorder"
           TargetType="TextBox">
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="Background"
                Value="#FFFFFFFF" />
        <Setter Property="Foreground"
                Value="#FF000000" />
        <Setter Property="Padding"
                Value="2" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9"
                                  Offset="0" />
                    <GradientStop Color="#FF8399A9"
                                  Offset="0.375" />
                    <GradientStop Color="#FF718597"
                                  Offset="0.375" />
                    <GradientStop Color="#FF617584"
                                  Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid x:Name="RootElement">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="MouseOverBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="DisabledVisualElement" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReadOnly">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="ReadOnlyVisualElement" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="FocusVisualElement" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="0"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="FocusVisualElement" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid" />
                                <VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                       Storyboard.TargetName="ValidationErrorElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                       Storyboard.TargetName="ValidationErrorElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen"
                                                                       Storyboard.TargetName="validationTooltip">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <system:Boolean>True</system:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="0"
                                Opacity="1">
                            <Grid>
                                <Border x:Name="ReadOnlyVisualElement"
                                        Background="#5EC9C9C9"
                                        Opacity="0" />
                                <Border x:Name="MouseOverBorder"
                                        BorderBrush="{x:Null}"
                                        BorderThickness="1">
                                    <ScrollViewer x:Name="ContentElement"
                                                  BorderThickness="0"
                                                  IsTabStop="False"
                                                  Padding="{TemplateBinding Padding}" />
                                </Border>
                            </Grid>
                        </Border>
                        <Border x:Name="DisabledVisualElement"
                                BorderBrush="#A5F7F7F7"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="#A5F7F7F7"
                                IsHitTestVisible="False"
                                Opacity="0" />
                        <Border x:Name="FocusVisualElement"
                                BorderBrush="#FF6DBDD1"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                IsHitTestVisible="False"
                                Margin="1"
                                Opacity="0" />
                        <Border x:Name="ValidationErrorElement"
                                BorderBrush="#FFDB000C"
                                BorderThickness="1"
                                CornerRadius="0"
                                Visibility="Collapsed">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Name="validationTooltip"
                                         DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                         Placement="Right"
                                         PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                         Template="{StaticResource ValidationToolTipTemplate}">
                                    <ToolTip.Triggers>
                                        <EventTrigger RoutedEvent="Canvas.Loaded">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                                   Storyboard.TargetName="validationTooltip">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <system:Boolean>true</system:Boolean>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </ToolTip.Triggers>
                                </ToolTip>
                            </ToolTipService.ToolTip>
                            <Grid Background="Transparent"
                                  HorizontalAlignment="Right"
                                  Height="12"
                                  Margin="1,-4,-4,0"
                                  VerticalAlignment="Top"
                                  Width="12">
                                <Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"
                                      Fill="#FFDC000C"
                                      Margin="1,3,0,0" />
                                <Path Data="M 0,0 L2,0 L 8,6 L8,8"
                                      Fill="#ffffff"
                                      Margin="1,3,0,0" />
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TelcoSDKButton"
           TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="0.5"
                                                         Storyboard.TargetProperty="(UIElement.Opacity)"
                                                         Storyboard.TargetName="contentPresenter" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="0.809"
                                                         Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
                                                         Storyboard.TargetName="rectangle" />
                                        <DoubleAnimation Duration="0"
                                                         To="0.106"
                                                         Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                                         Storyboard.TargetName="rectangle" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0"
                                                        To="#FFD1EFFF"
                                                        Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                        Storyboard.TargetName="rectangle" />
                                        <ColorAnimation Duration="0"
                                                        To="#FFF5FDFF"
                                                        Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                        Storyboard.TargetName="rectangle" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonOuterBorder"
                                BorderBrush="#FFC2BCBC" Padding="5">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1"
                                                     StartPoint="0.5,0">
                                    <GradientStop Color="#FFCFCFCF"
                                                  Offset="0.671" />
                                    <GradientStop Color="White"
                                                  Offset="0.292" />
                                    <GradientStop Color="#FFFBFBFB"
                                                  Offset="0.465" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <ContentPresenter x:Name="contentPresenter"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center">
                                <ContentPresenter.OpacityMask>
                                    <LinearGradientBrush EndPoint="0.5,1"
                                                         StartPoint="0.5,0">
                                        <GradientStop Color="Black"
                                                      Offset="0" />
                                        <GradientStop Color="White"
                                                      Offset="1" />
                                    </LinearGradientBrush>
                                </ContentPresenter.OpacityMask>
                            </ContentPresenter>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="FontFamily"
                Value="Portable User Interface" />
    </Style>
    <!-- End common styles-->

    <!-- Phone Number control -->
    <Style TargetType="controls:PhoneNumberControl">
        <Setter
            Property="PhoneNumberTextFontFamily"
            Value="Georgia" />
        <Setter
            Property="PhoneNumberTextFontSize"
            Value="21" />
        <Setter
            Property="PhoneNumberTextForeground"
            Value="#FF336699" />
        <Setter
            Property="PhoneNumberTextBackground"
            Value="#FFFFFFFF" />
        <Setter
            Property="CountryTextFontFamily"
            Value="Arial" />
        <Setter
            Property="CountryTextFontSize"
            Value="12" />
        <Setter
            Property="CountryTextForeground"
            Value="#FF000000" />
        <Setter
            Property="CountryDropdownBackground"
            Value="#FFFFFFFF" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:PhoneNumberControl">
                    <Grid x:Name="LayoutRoot"
                          MinWidth="100">
                        <Border x:Name="OuterBorder"
                                BorderBrush="#FFC2BCBC"
                                BorderThickness="1"
                                Background="White"
                                Height="30"
                                VerticalAlignment="Center">
                            <Grid VerticalAlignment="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <controls:CountryPicker x:Name="CountryPickerControl"
                                                        Grid.Column="0"
                                                        Margin="0"
                                                        VerticalAlignment="Center"
                                                        HorizontalAlignment="Center" />
                                <TextBox x:Name="PhoneNumberTextbox"
                                         Grid.Column="1"
                                         FontSize="21.333"
                                         FontFamily="Georgia"
                                         Style="{StaticResource TextboxWithoutBorder}"
                                         Height="28"
                                         Padding="5,0,0,0"
                                         Foreground="#FF336699" />
                                <Border x:Name="ClearBorder"
                                        BorderThickness="1,0,0,0"
                                        Grid.Column="2"
                                        CornerRadius="0"
                                        Margin="0"
                                        Padding="0"
                                        Width="40"
                                        BorderBrush="#FFC2BCBC"
                                        HorizontalAlignment="Center"
                                        RenderTransformOrigin="0.432,0.487"
                                        Height="29"
                                        VerticalAlignment="Center">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1"
                                                             StartPoint="0.5,0">
                                            <GradientStop Color="#FFCFCFCF"
                                                          Offset="0.671" />
                                            <GradientStop Color="White"
                                                          Offset="0.292" />
                                            <GradientStop Color="#FFFBFBFB"
                                                          Offset="0.465" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Path Data="M3.9999928,0 L5.9999928,0 L5.9999928,4.0000033 L10,4.0000033 L10,6.0000033 L5.9999928,6.0000033 L5.9999928,10 L3.9999928,10 L3.9999928,6.0000033 L0,6.0000033 L0,4.0000033 L3.9999928,4.0000033 z"
                                          HorizontalAlignment="Center"
                                          Height="15"
                                          Margin="0"
                                          RenderTransformOrigin="0.5,0.5"
                                          Stretch="Fill"
                                          Stroke="Black"
                                          StrokeThickness="0"
                                          UseLayoutRounding="False"
                                          VerticalAlignment="Center"
                                          Width="15">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="0.854,0.146"
                                                                 StartPoint="0.146,0.854">
                                                <GradientStop Color="Black"
                                                              Offset="0.437" />
                                                <GradientStop Color="#FF969696"
                                                              Offset="0.535" />
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                        <Path.RenderTransform>
                                            <CompositeTransform Rotation="-45" />
                                        </Path.RenderTransform>
                                    </Path>
                                </Border>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- SMS control -->
    <Style TargetType="controls:SMSControl">
        <Setter Property="Background"
                Value="GhostWhite" />
        <Setter Property="HeaderText"
                Value="Send SMS" />
        <Setter Property="HeaderTextFontFamily"
                Value="Arial" />
        <Setter Property="HeaderTextFontSize"
                Value="12" />
        <Setter Property="HeaderTextForeground"
                Value="#FF666666" />
        <Setter Property="HeaderTextFontWeight"
                Value="Bold" />
        <Setter Property="MessageTextboxBackground"
                Value="White" />
        <Setter Property="MessageTextboxFontFamily"
                Value="Portable User Interface" />
        <Setter Property="MessageTextboxForeground"
                Value="Black" />
        <Setter Property="MessageTextboxFontWeight"
                Value="Normal" />
        <Setter Property="MessageTextboxFontSize"
                Value="14" />
        <Setter Property="MessageDeliveryStatusTextFontFamily"
                Value="Portable User Interface" />
        <Setter Property="MessageDeliveryStatusTextForeground"
                Value="Black" />
        <Setter Property="MessageDeliveryStatusTextFontWeight"
                Value="Normal" />
        <Setter Property="MessageDeliveryStatusTextFontSize"
                Value="11" />
        <Setter Property="SuccessBorderBackground"
                Value="#FF299D3B" />
        <Setter Property="FailureBorderBackground"
                Value="#FFC83B25" />
        <Setter Property="DefaultMessageText"
                Value="Type message here" />
        <Setter Property="MessageAreaHeight"
                Value="100" />
        <Setter Property="MessagesListHeight"
                Value="70" />
        <Setter Property="MaxMessageLength"
            Value="160" />
        <!--<Setter Property="FileAttachmentListHeight"
                Value="90" />-->

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:SMSControl">
                    <Grid x:Name="LayoutRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="MessageSendStateGroup">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"
                                                      To="Success">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                    <VisualTransition GeneratedDuration="0:0:0.5"
                                                      To="Failure">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Success">
                                    <Storyboard>
                                        <ColorAnimation Duration="0"
                                                        From="White"
                                                        To="#FF299D3B"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                        Storyboard.TargetName="MessageDeliveryStatusBorder" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="MessageDeliveryStatusBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Failure">
                                    <Storyboard>
                                        <ColorAnimation Duration="0"
                                                        From="White"
                                                        To="#FFC83B25"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                        Storyboard.TargetName="MessageDeliveryStatusBorder" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="MessageDeliveryStatusBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="SMSOuterBorder"
                                BorderBrush="#FFB0AFAF"
                                BorderThickness="1"
                                Padding="10">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1"
                                                     StartPoint="0.5,0">
                                    <GradientStop Color="#FFE9E9E9"
                                                  Offset="1" />
                                    <GradientStop Color="#FFE9E9E9" />
                                    <GradientStop Color="#FFF7F7F7"
                                                  Offset="0.083" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <!--<ColumnDefinition Width="Auto" />-->
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackPanel x:Name="HeaderPanel"
                                            Orientation="Vertical"
                                            Grid.Row="0"
                                            Grid.ColumnSpan="2">
                                    <TextBlock x:Name="HeaderTextBlock"
                                               Margin="0,0,0,10"
                                               TextWrapping="Wrap"
                                               Text="{TemplateBinding HeaderText}"
                                               VerticalAlignment="Center"
                                               FontFamily="{TemplateBinding HeaderTextFontFamily}"
                                               FontSize="{TemplateBinding HeaderTextFontSize}"
                                               Foreground="{TemplateBinding HeaderTextForeground}"
                                               FontWeight="{TemplateBinding HeaderTextFontWeight}">
                                    </TextBlock>
                                    <Path Data="M0,-18.8125 L370.69965,-18.8125"
                                          Fill="#FFCCCCCC"
                                          Height="1"
                                          Margin="0"
                                          Stretch="Fill"
                                          Stroke="#FF949494"
                                          UseLayoutRounding="False"
                                          VerticalAlignment="Top"
                                          Opacity="0.5">
                                    </Path>
                                </StackPanel>
                                <controls:PhoneNumberControl x:Name="PhoneNumberControl"
                                                             Grid.ColumnSpan="2"
                                                             HorizontalAlignment="Stretch"
                                                             Margin="0,10,0,0"
                                                             Grid.Row="1"
                                                             VerticalAlignment="Stretch">
                                </controls:PhoneNumberControl>
                                <!--<Image x:Name="AttachFilesImage"
                                       Margin="0"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Top"
                                       Grid.Row="1"
                                       Grid.Column="0" />-->
                                <StackPanel Grid.Column="0"
                                            Orientation="Vertical"
                                            Grid.Row="2"
                                            Margin="0,10,10,5">
                                    <Border x:Name="MessageContainerBorder"
                                            Height="{TemplateBinding MessageAreaHeight}"
                                            Padding="0"
                                            VerticalAlignment="Top"
                                            BorderThickness="1"
                                            BorderBrush="#FFCDCDCD"
                                            HorizontalAlignment="Stretch">
                                        <TextBox x:Name="MessageTextbox"
                                                 AcceptsReturn="True"
                                                 Background="{TemplateBinding MessageTextboxBackground}"
                                                 Foreground="{TemplateBinding MessageTextboxForeground}"
                                                 FontWeight="{TemplateBinding MessageTextboxFontWeight}"
                                                 FontSize="{TemplateBinding MessageTextboxFontSize}"
                                                 FontFamily="{TemplateBinding MessageTextboxFontFamily}"
                                                 Style="{StaticResource TextboxWithoutBorder}"
                                                 TextWrapping="Wrap"
                                                 Text="{TemplateBinding DefaultMessageText}"
                                                 Margin="0,0,1,0"
                                                 MaxLength="{TemplateBinding MaxMessageLength}" />
                                    </Border>

                                    <controls:ReceivedMessagesList x:Name="ListReceivedMessages"
                                                                   Visibility="Collapsed"
                                                                   Margin="0,10,0,0"
                                                                   Height="{TemplateBinding MessagesListHeight}" />
                                    <!--<StackPanel x:Name="FilesAttachedPanel"
                                                Visibility="Collapsed"
                                                Orientation="Vertical">
                                        <TextBlock Text="Attached Files"
                                                   Margin="10,0,0,0"></TextBlock>
                                        <controls:AttachedFilesList x:Name="ListFileAttachments"
                                                                    Margin="10,2,10,10"
                                                                    Height="{TemplateBinding FileAttachmentListHeight}"
                                                                    HorizontalAlignment="Stretch">
                                        </controls:AttachedFilesList>
                                    </StackPanel>-->

                                    <Border x:Name="MessageDeliveryStatusBorder"
                                            BorderBrush="Black"
                                            BorderThickness="1"
                                            Background="#FFF9F8F8"
                                            CornerRadius="0"
                                            HorizontalAlignment="Left"
                                            Margin="0,10,0,0"
                                            Padding="5"
                                            Visibility="Collapsed"
                                            VerticalAlignment="Bottom">
                                        <TextBlock x:Name="MessageDeliveryStatusTextblock"
                                                   Foreground="{TemplateBinding MessageDeliveryStatusTextForeground}"
                                                   FontWeight="{TemplateBinding MessageDeliveryStatusTextFontWeight}"
                                                   FontSize="{TemplateBinding MessageDeliveryStatusTextFontSize}"
                                                   FontFamily="{TemplateBinding MessageDeliveryStatusTextFontFamily}"
                                                   Margin="0"
                                                   TextWrapping="Wrap"
                                                   Text="Message send status" />
                                    </Border>
                                </StackPanel>
                                <controls:TelcoButton x:Name="SendButton"
                                        Grid.Column="1"
                                        HorizontalAlignment="Right"
                                        Grid.Row="2"
                                        Caption="Send"
                                        Foreground="Black"
                                        FontSize="15"
                                        Margin="0,10,0,0"
                                        VerticalAlignment="Top">
                                </controls:TelcoButton>
                                    <!--Style="{StaticResource TelcoSDKButton}">-->
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--TranscribeMediaControl-->

    <!--Player Slider Thumb style-->
    <Style TargetType="Thumb" x:Key="SliderThumbStyle">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="BorderThickness" Value="3" />
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="MinWidth" Value="14"/>
        <Setter Property="MinHeight" Value="14"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F9FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFC8D6E2"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FF69849A"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FF417096"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FF417096"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FF417096"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FF417096"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Ellipse x:Name="BackgroundGradient" StrokeThickness="3"  Width="{TemplateBinding MinWidth}" Height="{TemplateBinding MinHeight}" >
                            <Ellipse.Stroke>
                                <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                                    <GradientStop Color="#FF8A9BAF" Offset="0"/>
                                    <GradientStop Color="#FFC2C5CE" Offset="0.734"/>
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint=".2,0" EndPoint=".7,1">
                                    <GradientStop Color="#FF457397" Offset="0"/>
                                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                    <GradientStop Color="#FF769AB7" Offset="0.486"/>
                                    <GradientStop Color="#FFA4BCCF" Offset="0.734"/>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Rectangle x:Name="DisabledVisualElement" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                        <Rectangle x:Name="FocusVisualElement" RadiusX="1" RadiusY="1" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Player slider style-->
    <Style TargetType="Slider" x:Key="PlaySliderStyle">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Maximum" Value="10"/>
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Value" Value="0" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid x:Name="Root" MinWidth="100">
                        <Grid.Resources>
                            <ControlTemplate x:Key="RepeatButtonTemplate">
                                <Grid x:Name="Root" Opacity="0" Background="Transparent"/>
                            </ControlTemplate>
                        </Grid.Resources>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver"/>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <!-- Horizontal Template -->
                        <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <!-- Track Layer -->
                            <Rectangle x:Name="TrackRectangle" StrokeThickness="3" Fill="#FFC1CDD9" Grid.Column="0" Grid.ColumnSpan="3" Height="12" RadiusX="5" RadiusY="5" Margin="5,0,5,0">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                        <GradientStop Color="#FF718597" Offset="0.375"/>
                                        <GradientStop Color="#FF617584" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                            </Rectangle>
                            <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Visibility="Collapsed"  Fill="White" Opacity=".55" Grid.Column="0" Grid.ColumnSpan="3" Height="12" RadiusX="5" RadiusY="5" Margin="5,0,5,0" />

                            <!-- Repeat Buttons + Thumb -->
                            <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Height="16" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0"/>
                            <Thumb Height="16" x:Name="HorizontalThumb" Style="{StaticResource SliderThumbStyle}" Width="16" Grid.Column="1" IsTabStop="False"/>
                            <Rectangle x:Name="ThumbDisabledOverlay" RadiusX="2" RadiusY="2"  Width="11" Grid.Column="1" Fill="White" Opacity=".55" Visibility="Collapsed"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Height="16" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2"/>
                        </Grid>

                        <!-- Vertical Template -->
                        <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <!-- Track Layer -->
                            <Rectangle Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" />
                            <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Visibility="Collapsed"  Fill="White" Opacity=".55" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" />
                            <!-- Repeat Buttons + Thumb -->
                            <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="2"/>
                            <Thumb Height="11" x:Name="VerticalThumb" Width="18" Grid.Row="1" IsTabStop="True"/>
                            <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="0"/>
                        </Grid>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Volume Slider Thumb Style-->
    <Style TargetType="Thumb" x:Key="VolumeSliderThumb">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" CornerRadius="2" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Grid Background="{TemplateBinding Background}"  Margin="1">
                                <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                                <Rectangle x:Name="BackgroundGradient" >
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                            <GradientStop Color="#FFFFFFFF" Offset="0" />
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                            <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                            <GradientStop Color="#C6FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </Border>
                        <Rectangle x:Name="DisabledVisualElement" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                        <Rectangle x:Name="FocusVisualElement" RadiusX="1" RadiusY="1" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Volume Slider Style-->
    <Style TargetType="Slider" x:Key="VolumeSliderStyle">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Maximum" Value="10" />
        <Setter Property="Minimum" Value="0" />
        <Setter Property="Value" Value="0" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid x:Name="Root">
                        <Grid.Resources>
                            <ControlTemplate x:Key="RepeatButtonTemplate">
                                <Grid x:Name="Root" Opacity="0" Background="Transparent"/>
                            </ControlTemplate>
                        </Grid.Resources>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver"/>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <!-- Horizontal Template -->
                        <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <!-- Track Layer -->
                            <Rectangle x:Name="TrackRectangle" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Column="0" Grid.ColumnSpan="3" Height="5" RadiusX="1" RadiusY="1" Margin="5,0,5,0" />
                            <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Visibility="Collapsed"  Fill="White" Opacity=".55" Grid.Column="0" Grid.ColumnSpan="3" Height="5" RadiusX="1" RadiusY="1" Margin="5,0,5,0" />
                            <!-- Repeat Buttons + Thumb -->
                            <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0"/>
                            <Thumb Height="6" Style="{StaticResource VolumeSliderThumb}" x:Name="HorizontalThumb" Width="6" Grid.Column="1" IsTabStop="True"/>
                            <Rectangle x:Name="ThumbDisabledOverlay" RadiusX="2" RadiusY="2"  Width="11" Grid.Column="1" Fill="White" Opacity=".55" Visibility="Collapsed"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2"/>
                        </Grid>

                        <!-- Vertical Template -->
                        <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <!-- Track Layer -->
                            <Rectangle Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" />
                            <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Visibility="Collapsed"  Fill="White" Opacity=".55" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" />
                            <!-- Repeat Buttons + Thumb -->
                            <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="2"/>
                            <Thumb Height="11" x:Name="VerticalThumb" Width="18" Grid.Row="1" IsTabStop="True"/>
                            <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="0"/>
                        </Grid>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Media Button Style-->
    <Style TargetType="Button" x:Key="MediaButtonStyle">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="MinWidth" Value="25"/>
        <Setter Property="MinHeight" Value="25"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused" />
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" CornerRadius="5,5,5,5" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Grid Background="{TemplateBinding Background}"  Margin="1">
                                <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                                <Rectangle x:Name="BackgroundGradient" >
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                            <GradientStop Color="#FFFFFFFF" Offset="0" />
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                            <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                            <GradientStop Color="#C6FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </Border>
                        <ContentPresenter
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              Margin="{TemplateBinding Padding}"/>
                        <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                        <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--The Transcribe Control Style-->
    <Style TargetType="controls:TranscribeMediaControl">
        <Setter Property="Background" Value="#FFFFFF"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderBrush" Value="#00002a"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="Padding" Value="8,8,8,8"/>
        <Setter Property="MinWidth" Value="75"/>
        <Setter Property="MinHeight" Value="70"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:TranscribeMediaControl">
                    <Grid x:Name="RootElement" MinWidth="150">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="TransCribeMediaControlStates">
                                <vsm:VisualState x:Name="None">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RecordingActivityGrid" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartTimeTextBlock" Storyboard.TargetProperty="Text" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="00:00">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndTimeTextBlock" Storyboard.TargetProperty="Text" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="00:00">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RecordButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopRecordButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopPlayButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Recording">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaySlider" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RecordingActivityGrid" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RecordButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopRecordButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Playing">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RecordButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False">
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StopPlayButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <!--The Main Border For the control-->
                        <Border x:Name="ControlBorder" 
                                CornerRadius="0" Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" 
                                Background="{TemplateBinding Background}"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                Height="{TemplateBinding Height}"
                                Width="{TemplateBinding Width}" >

                            <!--The inner Main Grid-->
                            <Grid x:Name="MediaGrid" HorizontalAlignment="Stretch">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <!--The toolbar border-->
                                <Border x:Name="ToolBorder" Grid.Row="1" Grid.Column="0" Margin="0,5,0,0"  CornerRadius="4,4,4,4" BorderBrush="#ECECEC" BorderThickness="2" >
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                                            <GradientStop Color="#FFF0EFF4" Offset="1" />
                                            <GradientStop Color="#E5FFFFFF" Offset="0.262" />
                                            <GradientStop Color="#FFEFEDF2" Offset="0.434" />
                                            <GradientStop Color="#FFFAFAFA" Offset="0" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Button x:Name="RecordButton" Style="{StaticResource MediaButtonStyle}" Padding="4,4,4,4" Grid.Row="1" Grid.Column="0">
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Ellipse x:Name="RecordEllipse" Height="15" Width="15"  HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Red" StrokeThickness="1" />
                                            </Grid>
                                        </Button>
                                        <Button x:Name="StopRecordButton" Style="{StaticResource MediaButtonStyle}" Padding="4,4,4,4" Grid.Row="1" Grid.Column="0" Visibility="Collapsed">
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Rectangle x:Name="StopRecordRectangle" Height="15" Width="15"  HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Red" StrokeThickness="1" />
                                            </Grid>
                                        </Button>
                                        <Button x:Name="PlayButton"  Style="{StaticResource MediaButtonStyle}" Margin="2,0,0,0" Padding="4,4,4,4" Grid.Row="1" Grid.Column="1">
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Path x:Name="PlayPath" Data="M176,96 L176,128 L208,112 z" Height="15" Width="15"  HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FF005B00"   Stretch="Fill" Stroke="#FFE4E4E4" UseLayoutRounding="False" />
                                            </Grid>
                                        </Button>
                                        <Button x:Name="StopPlayButton" Style="{StaticResource MediaButtonStyle}" Padding="4,4,4,4" Grid.Row="1" Grid.Column="1" Visibility="Collapsed">
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Rectangle x:Name="StopPlayRectangle" Height="15" Width="15"  HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Red" StrokeThickness="1" />
                                            </Grid>
                                        </Button>
                                        <Grid Grid.Row="1" Grid.Column="2" Margin="2,0,2,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock x:Name="StartTimeTextBlock" Margin="5,0,0,0" HorizontalAlignment="Left" FontSize="10" Foreground="Black" Grid.Row="0" Grid.Column="0" Text="00:00"/>
                                            <TextBlock x:Name="EndTimeTextBlock" FontSize="10" Foreground="Black" HorizontalAlignment="Right" Margin="0,0,5,0" Grid.Row="0" Grid.Column="1" Text="00:00"/>
                                            <Slider x:Name="PlaySlider" Style="{StaticResource PlaySliderStyle}"  MinWidth="60" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
                                            <Grid x:Name="RecordingActivityGrid"  VerticalAlignment="Bottom" Visibility="Collapsed" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
                                                <StackPanel x:Name="RecordingActivityBaseStackPanel">
                                                    <TextBlock Text="Recording...." FontSize="10" Foreground="Gray" HorizontalAlignment="Left"></TextBlock>
                                                    <Border x:Name="RecordingActivityBorder" BorderThickness="1" BorderBrush="Gray"  HorizontalAlignment="Stretch">
                                                        <StackPanel x:Name="RecordingActivityStackPanel" Orientation="Horizontal"/>
                                                    </Border>
                                                </StackPanel>
                                            </Grid>
                                        </Grid>
                                        <Button x:Name="VolumeButton" Style="{StaticResource MediaButtonStyle}" Padding="4,4,4,4" Grid.Row="1" Grid.Column="3">
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                    <RowDefinition Height="Auto"/>
                                                </Grid.RowDefinitions>
                                                <Path x:Name="VolumePath" Grid.Row="0" Fill="#FFA19FA2" Height="15" Width="15"  Stretch="Fill" Stroke="#FFE4E4E4"  Data="M41.436001,11.621002 L43.671986,11.621002 C44.82415,12.942635 45.719193,14.384711 46.357117,15.947231 C46.995037,17.509752 47.313999,19.270844 47.313999,21.230503 C47.313999,23.190165 46.995037,24.951256 46.357117,26.513775 C45.719193,28.076296 44.82415,29.518372 43.671986,30.840004 L41.436001,30.840004 L41.436001,30.742346 C41.937225,30.293121 42.440079,29.744614 42.944557,29.096817 C43.449036,28.449022 43.893303,27.72473 44.277359,26.923937 C44.680943,26.090591 45.00153,25.211674 45.239124,24.287184 C45.476719,23.362694 45.595516,22.3438 45.595516,21.230503 C45.595516,20.162781 45.47509,19.147142 45.234241,18.183588 C44.993393,17.220036 44.674435,16.33786 44.277359,15.537069 C43.867268,14.710237 43.423,13.985943 42.944557,13.364189 C42.466114,12.742436 41.963264,12.193928 41.436001,11.718659 z M45.813995,9 L48.04998,9 C49.202145,10.719173 50.097187,12.595021 50.735111,14.62754 C51.373035,16.660061 51.691994,18.95088 51.691994,21.5 C51.691994,24.049118 51.373035,26.339937 50.735111,28.372458 C50.097187,30.404978 49.202145,32.280823 48.04998,34 L45.813995,34 L45.813995,33.872967 C46.31522,33.288616 46.818073,32.575119 47.322552,31.732468 C47.82703,30.889818 48.271297,29.947662 48.655354,28.905994 C49.058937,27.821983 49.379528,26.67869 49.617119,25.476116 C49.854713,24.273542 49.973511,22.94817 49.973511,21.5 C49.973511,20.111111 49.853085,18.789972 49.612236,17.536585 C49.371387,16.283197 49.052429,15.13567 48.655354,14.094004 C48.245262,13.018462 47.800995,12.076304 47.322552,11.26753 C46.844109,10.458757 46.341259,9.7452583 45.813995,9.1270323 z M37.499996,0.5 L37.499996,36.5 L31.999998,36.060974 L16.755554,26.5 L0.5,26.5 L0.5,11.5 L15.559722,11.5 L32.999996,0.93902361 z"  UseLayoutRounding="False"/>
                                                <Slider x:Name="VolumeSlider" Style="{StaticResource VolumeSliderStyle}"  VerticalAlignment="Top"  HorizontalAlignment="Stretch" Grid.Row="2"/>
                                            </Grid>
                                        </Button>
                                    </Grid>
                                </Border>
                                <!--The Input TextBox-->
                                <TextBox x:Name="InputTextBox" TextWrapping="Wrap" MinHeight="50"  Grid.Row="2" Grid.Column="0" Margin="0,5,0,0" AcceptsReturn="True" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" TextAlignment="Center"  FontStyle="Italic" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto"></TextBox>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>


</ResourceDictionary>